<template>
    <div>
        <h2 v-if="!historyData" style="text-align: center; color: #e0001b;margin-bottom:5px">暂无维修历史记录</h2>

        <el-card>
            <div slot="header">
                <span class="title">最新老化历史记录</span>
                <el-button style="float: right" type="success" @click="goBack">返回上一页</el-button>
            </div>
            <div class="cardBox" v-if="historyData">
                <el-card class="left">
                    <div class="history-wrap">
                        <span style="font-size: 20px; color: #409eff"
                            ><p class="name">SN：</p>
                            {{ historyData.serialNumber }}</span
                        >
                        <span class="redColor"
                            ><p class="name">是否已维修：</p>
                            <span style="color: #43be86" v-if="historyData.isRepair">是</span>
                            <span style="color: #e0001b" v-if="!historyData.isRepair">否</span>
                        </span>
                        <span
                            ><p class="name">日志生成时间：</p>
                            {{ historyData.updateTime }}</span
                        >
                        <span
                            ><p class="name">Hash IC：</p>
                            {{ historyData.miningStrategy }}</span
                        >
                        <span
                            ><p class="name">模式：</p>
                            {{ historyData.serialNumber }}</span
                        >
                        <span
                            ><p class="name">工作状态：</p>
                            {{ historyData.status }}</span
                        >
                        <span
                            ><p class="name">时长：</p>
                            {{ historyData.totalRunningTime }}</span
                        >
                        <span
                            ><p class="name">本地算力(TH)：</p>
                            {{ historyData.averageHashRate }}</span
                        >
                        <span
                            ><p class="name">软件版本：</p>
                            {{ historyData.swVersion }}</span
                        >
                        <span>
                            <p class="name">老化结果：</p>
                            <p :class="historyData.runResult === 'pass' ? '' : 'redColor'">{{ historyData.runResult }}</p>
                        </span>
                        <span class="redColor" v-if="historyData.error != '0x0'"
                            ><p class="name">Error Code：</p>
                            {{ historyData.error }}</span
                        >
                        <span class="redColor" v-if="historyData.error != '0x0'"
                            ><p class="name">错误描述：</p>
                            {{ historyData.errorDescribe }}
                        </span>
                    </div>
                </el-card>
                <el-card class="right">
                    <ul
                        class="item-wrap"
                        v-for="(board, boardIndex) in historyData.thirdChildren"
                        :key="boardIndex"
                        :class="boardIndex == historyData.thirdChildren.length - 1 ? '' : 'border-bottom'"
                    >
                        <li class="form">
                            <span class="spanItem" style="font-size: 20px; color: #409eff"
                                ><p class="name">{{ board.computeBoardName }}：</p>
                                {{ board.sn }}</span
                            >
                            <span class="spanItem"
                                ><p class="name">算力版状态：</p>
                                {{ board.error === '0' ? 'pass' : board.error === '4000' ? 'pass' : 'fail' }}</span
                            >
                            <span class="spanItem" v-if="board.error != '4000' || board.error != '0'"
                                ><p class="name">Error Code：</p>
                                {{ board.error }}</span
                            >
                            <span class="spanItem"
                                ><p class="name">本地算力(TH)：</p>
                                {{ board.averageHashRate }}</span
                            >
                            <span class="errorItem">
                                <p class="name">错误描述：</p>
                                <p class="redColor">{{ board.errorDescribe }}</p>
                            </span>
                        </li>
                    </ul>
                </el-card>
            </div>
        </el-card>
    </div>
</template>

<script>
import getHistoryList from '@/api/historyList';
export default {
    data() {
        return {
            historyData: '',
            code: ''
        };
    },
    created() {
        const SN = this.$route && this.$route.query.SN;
        this.getList(SN);
    },
    methods: {
        getList(SN) {
            getHistoryList({ sn: SN }).then((res) => {
                console.log(res);
                this.historyData = res.data.data.mainBoard;
                this.code = res.data.data.code;
                console.log(this.historyData);
            });
        },
        goBack() {
            this.$router.go(-1);
        }
    }
};
</script>

<style lang="less" scoped>
.title {
    font-weight: bold;
}
.cardBox {
    display: flex;
    .left {
        width: 50%;
        margin-right: 10px;
        .history-wrap {
            span {
                display: flex;
                align-items: center;
                margin: 5px 0;
                .name {
                    color: black;
                    font-weight: bold;
                }
            }
            .redColor {
                color: #e0001b;
            }
        }
    }

    .right {
        width: 50%;
        margin-left: 10px;
        .item-wrap {
            margin: 2px 0;
            padding: 10px;
            .form {
                .spanItem {
                    display: flex;
                    align-items: center;
                    margin: 5px 0;
                    .name {
                        color: black;
                        font-weight: bold;
                    }
                }
                .errorItem {
                    display: flex;
                    flex-flow: wrap;
                    .name {
                        color: black;
                        font-weight: bold;
                    }
                    .redColor {
                        color: #e0001b;
                    }
                }
            }
        }
    }

    // .border-bottom {
    //     border-bottom: 4px solid #f0f0f0;
    // }
}
</style>